<template>
  <div class="navigation-layout">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <div class="logo">
          <el-icon size="32" class="logo-icon"><House /></el-icon>
          <h1 class="logo-title">智慧医生平台</h1>
        </div>
      </div>
      
      <div class="sidebar-content">
        <el-menu
          :default-active="activeMenuItem"
          class="sidebar-menu"
          @select="handleMenuSelect"
          background-color="transparent"
          text-color="#fff"
          active-text-color="#00BCD4"
        >
          <el-menu-item index="dashboard">
            <el-icon><Monitor /></el-icon>
            <span>控制台</span>
          </el-menu-item>
          
          <el-menu-item index="profile">
            <el-icon><User /></el-icon>
            <span>个人信息</span>
          </el-menu-item>
          
          <el-menu-item index="patients">
            <el-icon><UserFilled /></el-icon>
            <span>患者管理</span>
          </el-menu-item>
          
          <el-menu-item index="appointments">
            <el-icon><Calendar /></el-icon>
            <span>预约管理</span>
          </el-menu-item>
          
          <el-menu-item index="face-recognition">
            <el-icon><Camera /></el-icon>
            <span>人脸识别</span>
          </el-menu-item>
          
          <el-menu-item index="settings">
            <el-icon><Setting /></el-icon>
            <span>个人设置</span>
          </el-menu-item>
        </el-menu>
      </div>
      
      <div class="sidebar-footer">
        <el-button type="danger" size="large" @click="handleLogout" class="logout-btn">
          <el-icon><SwitchButton /></el-icon>
          退出登录
        </el-button>
      </div>
    </div>
    
    <!-- 右侧内容区域 -->
    <div class="main-content">
      <div class="content-header">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="user-info">
          <el-avatar size="40" class="user-avatar">
            <el-icon><UserFilled /></el-icon>
          </el-avatar>
          <span class="user-name">{{ doctorName || '医生' }}</span>
        </div>
      </div>
      
      <div class="content-body">
        <!-- 这里放置右侧内容 -->
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  House, Monitor, User, UserFilled, Calendar, 
  Camera, Setting, SwitchButton, Document
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const activeMenuItem = ref('profile')
const doctorName = ref('')

// 根据当前路由设置页面标题
const currentPageTitle = computed(() => {
  const titleMap = {
    'dashboard': '控制台',
    'profile': '个人信息',
    'patients': '患者管理',
    'appointments': '预约管理',
    'face-recognition': '人脸识别',
    'settings': '个人设置'
  }
  return titleMap[activeMenuItem.value] || '控制台'
})

// 处理菜单选择
const handleMenuSelect = (key) => {
  activeMenuItem.value = key
  
  // 根据菜单项导航到对应的内容
  switch (key) {
    case 'profile':
      // 保持在当前页面，因为个人信息就在右侧显示
      break
    case 'settings':
      router.push('/doctor/personal-profile')
      break
    case 'face-recognition':
      router.push('/recognition')
      break
    default:
      ElMessage.info(`${currentPageTitle.value}功能正在开发中...`)
  }
}

// 处理退出登录
const handleLogout = () => {
  ElMessage.success('已退出登录')
  // 清除本地存储的登录信息
  localStorage.removeItem('doctorToken')
  localStorage.removeItem('doctorInfo')
  // 跳转到登录页面
  router.push('/doctor/login')
}

// 页面挂载时设置默认菜单项
onMounted(() => {
  // 从本地存储获取医生信息
  const doctorInfo = localStorage.getItem('doctorInfo')
  if (doctorInfo) {
    try {
      const info = JSON.parse(doctorInfo)
      doctorName.value = info.name || info.username || '医生'
    } catch (error) {
      console.error('Parse doctor info error:', error)
    }
  }
  
  // 根据当前路由设置激活的菜单项
  if (route.path === '/doctor/profile') {
    activeMenuItem.value = 'profile'
  } else if (route.path === '/doctor/personal-profile') {
    activeMenuItem.value = 'settings'
  }
})
</script>

<style scoped>
.navigation-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 左侧导航栏 */
.sidebar {
  width: 240px;
  min-width: 240px;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, 
    rgba(103, 58, 183, 0.95) 0%,
    rgba(63, 81, 181, 0.9) 50%, 
    rgba(33, 150, 243, 0.9) 100%
  );
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header {
  padding: 30px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
  color: white;
}

.logo-icon {
  background: rgba(255, 255, 255, 0.15);
  padding: 10px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.logo-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #fff 0%, #00BCD4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sidebar-content {
  flex: 1;
  padding: 20px 0;
  overflow-y: auto;
}

.sidebar-menu {
  border: none;
  background: transparent;
}

.sidebar-menu .el-menu-item {
  margin: 5px 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  height: 50px;
  line-height: 50px;
}

.sidebar-menu .el-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #00BCD4;
  transform: translateX(5px);
}

.sidebar-menu .el-menu-item.is-active {
  background: linear-gradient(135deg, rgba(0, 188, 212, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  color: #00BCD4;
  box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.logout-btn {
  width: 100%;
  height: 45px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.9) 0%, rgba(183, 28, 28, 0.9) 100%);
  border: none;
  color: white;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244, 67, 54, 0.4);
}

/* 右侧内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  overflow: hidden;
  height: 100vh;
  width: calc(100vw - 240px);
  min-width: 0;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: white;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.breadcrumb {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  background: linear-gradient(135deg, #673AB7 0%, #00BCD4 100%);
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.content-body {
  flex: 1;
  overflow-y: auto;
  background: #f8f9fa;
  width: 100%;
  min-height: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .sidebar {
    width: 220px;
    min-width: 220px;
  }
  
  .main-content {
    width: calc(100vw - 220px);
  }
  
  .logo-title {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 200px;
    min-width: 200px;
  }
  
  .main-content {
    width: calc(100vw - 200px);
  }
  
  .content-header {
    padding: 15px 20px;
  }
  
  .user-name {
    display: none;
  }
}
</style>
